<template>
  <el-card>
    <el-button
      @click="$router.push('/goods/add')"
      type="primary"
      icon="el-icon-circle-plus-outline"
    >新增</el-button>
    <el-divider></el-divider>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="id" min-width="80"></el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" min-width="180"></el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" min-width="180"></el-table-column>
      <el-table-column prop="goodsname" label="商品名称" min-width="180"></el-table-column>
      <el-table-column prop="img" label="商品图片" min-width="180">
        <template v-slot="$props">
          <img :src="$imgBaseURL+$props.row.img" alt style="height:80px" />
        </template>
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" min-width="180"></el-table-column>
      <el-table-column prop="price" label="零售价格" min-width="180"></el-table-column>
      <el-table-column prop="isnew" label="是否新品" min-width="180">
        <template v-slot="$props">
          <el-switch
            @change="statusUpdate($props.row)"
            v-model="$props.row.isnew"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" min-width="180">
        <template v-slot="$props">
          <el-switch
            @change="statusUpdate($props.row)"
            v-model="$props.row.ishot"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="180">
        <template v-slot="$props">
          <el-tag type="success" v-if="$props.row.status===1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="100">
        <template v-slot="$props">
          <el-button
            @click="$router.push('/goods/'+$props.row.id)"
            type="success"
            circle
            size="mini"
            icon="el-icon-edit"
          ></el-button>
          <el-button
            @click="del($props.row.id)"
            type="danger"
            circle
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="size"
      @current-change="pageChange"
      background
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
import { getGoodsList, getGoodsCount, goodsUpdate } from "../../request/goods";
export default {
  data() {
    return {
      // 商品列表
      list: [],
      // 页码
      page: 1,
      // 每一页显示的数据条数
      size: 5,
      // 商品总数量
      total: 0
    };
  },
  methods: {
    // 删除
    del(id) {
      this.$confirm(async () => {
        const res = await this.$http.post("/api/goodsdelete", { id });
        if (res.code === 200) {
          const index = this.list.findIndex(item => item.id === id);
          this.list.splice(index, 1);
          return this.$success(res.msg);
        }
        this.$error(res.msg);
      });
    },
    //  监听switch开关的状态
    statusUpdate(row) {
      goodsUpdate({ id: row.id, isnew: row.isnew, ishot: row.ishot }).then(
        res => {
          if (res) {
            return this.$success("操作成功");
          }
          this.$error("操作成功");
        }
      );
    },
    // 监听分页按钮的点击
    pageChange(page) {
      // 1-更新页码
      this.page = page;
      // 2-重新请求数据列表
      this.getGoodsList();
    },
    // 获取商品列表
    async getGoodsList() {
      const list = await getGoodsList(this.page, this.size);
      if (list) {
        this.list = list;
      }
    },
    // 获取商品总数
    async getGoodsCount() {
      const total = await getGoodsCount();
      if (total) {
        this.total = total;
      }
    }
  },
  created() {
    this.getGoodsList();
    this.getGoodsCount();
  }
};
</script>

<style>
</style>